<template>
  <div>
    <div class="top">
      <el-input
        v-model="input"
        placeholder="输入商品id具体查询"
        style="width: 200px; line-height: 50px; border-radius: 30px"
      ></el-input>
      <el-button type="primary" round @click="search">搜索</el-button>
      <ul id="in">
        <li>分类id：{{ idData.cat_id }}</li>
        <li>分类名：{{ idData.cat_name }}</li>
        <li>分类父id：{{ idData.cat_pid }}</li>
        <li>分类当前层级{{ idData.cat_level }}</li>
      </ul>
      <!-- 添加新角色 -->
      <el-button type="primary" round @click="dialogFormVisible = true"
        >添加新的商品分类</el-button
      >
      <el-dialog
        title="添加新的分类"
        :visible.sync="dialogFormVisible"
        style="line-height: 40px"
      >
        <el-form>
          <el-form-item label="商品名称">
            <el-input v-model="shopName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-cascader
              v-model="value"
              :options="options"
              :props="props"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addrloe">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改弹框 -->
      <el-dialog
        title="修改分类信息"
        :visible.sync="updateVisible"
        style="line-height: 40px"
      >
        <el-form>
          <el-form-item label="商品id">
            <el-input v-model="updateid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="updateform" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="商品分类">
            <el-cascader
              v-model="value"
              :options="options"
              :props="props"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateVisible = false">取 消</el-button>
          <el-button type="primary" @click="quedinggai">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table
      :data="tableData"
      v-loading.fullscreen.lock="fullscreenLoading"
      style="width: 100%; margin-bottom: 20px; line-height: 30px"
      row-key="cat_id"
      border
      stripe
      lazy
      :tree-props="{
        children: 'children',
        hasChildren: 'hasChildren',
      }"
    >
      <el-table-column prop="cat_id" label="分类ID" sortable width="180">
      </el-table-column>
      <el-table-column prop="cat_name" label="分类名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="cat_pid" label="分类父ID"> </el-table-column>
      <el-table-column prop="cat_level" label="分类当前层级"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            type="info"
            title="修改商品分类"
            @click="updata(scope.row)"
            >修改信息</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            title="删除该商品分类"
            @click="del(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "VueGoods",

  data() {
    return {
      tableData: [],
      input: "",
      idData: {},
      fullscreenLoading: false,
      dialogFormVisible: false,
      updateVisible: false,
      shopName: "",
      value: [],
      options: [],
      props: {
        expandTrigger: "hover",
        value: "cat_level",
        label: "cat_name",
      },
      pagesize: 5,
      total: 5,
      //修改框
      updateform: "",
      updateid: "",
    };
  },

  async mounted() {
    if (localStorage.getItem("userinfo")) {
      this.fullscreenLoading = true;
      this.getfenlei(1, this.pagesize);

      //内容
      var { data } = await this.$axios.get("/categories?type=3");
      console.log(data);
      if (data.meta.status == 200) {
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 1000);
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        this.options = data.data;
      } else {
        this.$message.error(data.meta.message);
      }
    }
  },

  methods: {
    //确定该
    async quedinggai() {
      this.updateVisible = false;
      var { data } = await this.$axios.put("/categories/" + this.updateid, {
        cat_name: this.updateform,
      });
      if (data.meta.status == 200) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        this.getfenlei(this.pagenum, this.pagesize);
      }
    },
    updata(info) {
      console.log(info);
      this.updateVisible = true;
      this.updateform = info.cat_name;
      this.updateid = info.cat_id;
    },
    //删除
    async del(updataform) {
      console.log(updataform);
      var { data } = await this.$axios.delete(
        "/categories/" + updataform.cat_id
      );
      if (data.meta.status == 200) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        this.getfenlei(this.pagenum, this.pagesize);
      }
    },
    //分页
    async getfenlei(pagenum = 1, pagesize = 3) {
      var { data } = await this.$axios.get(
        `/categories?pagenum=${pagenum}&pagesize=${pagesize}`
      );
      if (data.meta.status == 200) {
        console.log(data);

        this.tableData = data.data.result;
        this.total = data.data.total;
        this.pagenum = data.data.pageNum;
      }
    },
    async handleSizeChange(pagesize) {
      this.pagesize = pagesize;
      this.getfenlei(1, pagesize);
    },

    async handleCurrentChange(pagenum) {
      this.getfenlei(pagenum, this.pagesize);
    },
    //添加分类
    handleChange(value) {
      console.log(value);
    },
    //搜索id
    async search() {
      const { data } = await this.$axios.get("/categories/" + this.input);
      this.idData = data.data;
      this.$message({
        message: data.meta.msg,
        type: "success",
      });
    },
    // 确定添加
    async addrloe() {
      let obj = {
        cat_pid: this.value[1],
        cat_level: this.value[2],
        cat_name: this.shopName,
      };
      const { data } = await this.$axios.post("/categories", obj);
      if (data.meta.status == 201) {
        this.dialogFormVisible = false;
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
      } else {
        this.$message.error(data.meta.message);
      }
    },
  },
};
</script>

<style lang="css">
.top {
  display: flex;
  height: 50px;
  /* border: rgb(233, 67, 67) solid 1px; */
  border-radius: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#in {
  line-height: 30px;
}
#in > li {
  float: left;
  width: 200px;
  list-style: none;
}
</style>